<script lang="ts" setup>
import { buildStyles, getSize } from "../utils";

interface ModalProps {
  visible?: boolean;
  width?: string | number;
  cancelText?: string;
  okText?: string;
  okButton?: boolean;
  footer?: boolean;
}

const props = withDefaults(defineProps<ModalProps>(), {
  visible: false,
  width: "300px",
  cancelText: "取消",
  okText: "确认",
  okButton: true,
  footer: true,
});
const emit = defineEmits(["update:visible"]);

const bodyStyles = buildStyles(() => {
  return {
    width: getSize(props.width),
  };
});

const handleClose = () => {
  emit("update:visible", false);
};
</script>

<template>
  <div class="umrp-modal" v-if="visible">
    <div class="umrp-modal-mask" @click="handleClose"></div>
    <div class="umrp-modal-body" :style="bodyStyles">
      <div class="umrp-modal-content">
        <slot></slot>
      </div>
      <div class="umrp-modal-footer" v-if="footer">
        <umrp-button @click="handleClose">{{ cancelText }}</umrp-button>
        <umrp-button type="primary" @click="handleClose" v-if="okButton">{{ okText }}</umrp-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.umrp-modal {
  &-mask {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &-content {
    padding: 32px 16px;
  }

  &-body {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    border-radius: 4px;
    min-width: 300px;
    transform: translate(-50%, -50%);
    background-color: #fff;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f2f2f2;
    padding: 10px;
  }
}
</style>
